<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Simula</title>

	<link rel='Stylesheet' type='text/css' href='style.css' />
	<link rel="stylesheet" href="form.css">

</head>

<body>
	<!-- application body - short and sweet :] -->
	<div id="editor_table">
	<h1>SIMULA</h1>
		<h2>Choose your weapon!</h2>
		<dl id="toolbox">
			<dt>Resistor</dt>
				<dd class="draggable"><img src="img/resistor.png" width="50" height="50" alt="Resistor" title="Resistor"></dd>
				<dd class="draggable"><img src="img/resistorv.png" width="50" height="50" alt="Resistor" title="Resistorv"></dd>
			<dt>Source</dt>
				<dd class="draggable"><img src="img/source.png" width="50" height="50" alt="Source" title="Source"></dd>
				<dd class="draggable"><img src="img/sourcev.png" width="50" height="50" alt="Source" title="Sourcev"></dd>
			<dt>Lightbulb</dt>
				<dd class="draggable"><img src="img/lightbulb.png" width="50" height="50" alt="Lightbulb" title="Lightbulb"></dd>
				<dd class="draggable"><img src="img/lightbulbv.png" width="50" height="50" alt="Lightbulb" title="Lightbulbv"></dd>

			<dt>Switch</dt>
				<dd class="draggable"><img src="img/switch.png" width="50" height="50" alt="Switch" title="Switch"></dd>
				<dd class="draggable"><img src="img/switchv.png" width="50" height="50" alt="Switch" title="Switchv"></dd>
		</dl>
	</div>



	<div id="game">
		<div class="canvasMask">
			<div class="explode">
			<img src="img/explode.gif" />
			</div>
			<canvas id="canvas" height="1000" width="1000">
				Your browser dont support html5 canvas element. Try Google Chrome.
			</canvas>
		</div>
		<br class="cl" />
	</div>

<form action="#" id="settings">
	<fieldset>
		<legend>Settings</legend>
		<h2>Settings</h2>
		<ul>
			<li>
				<label for="resistance1">R<sub>1</sub></label>
				<input type="range" id="resistance1" min="50" max="1000" value="500" class="input" step="50">
				<output for="resistance1" onforminput="value = resistance1.valueAsNumber;"></output>
			</li>
			<li>
				<label for="resistance2">R<sub>2</sub></label>
				<input type="range" id="resistance2" min="50" max="1000" value="500" class="input" step="50">
				<output for="resistance2" onforminput="value = resistance2.valueAsNumber;"></output>
			</li>
			<li>
				<label for="resistance3">R<sub>3</sub></label>
				<input type="range" id="resistance3" min="50" max="1000" value="500" class="input" step="50">
				<output for="resistance3" onforminput="value = resistance3.valueAsNumber;"></output>
			</li>
			<li>
				<label for="resistance4">R<sub>4</sub></label>
				<input type="range" id="resistance4" min="50" max="1000" value="500" class="input" step="50">
				<output for="resistance4" onforminput="value = resistance4.valueAsNumber;"></output>
			</li>
			<li>
				<label for="resistance5">R<sub>5</sub></label>
				<input type="range" id="resistance5" min="50" max="1000" value="500" class="input" step="50">
				<output for="resistance5" onforminput="value = resistance5.valueAsNumber;"></output>
			</li>
			<li>
				<label for="source1">E<sub>1</sub></label>
				<input type="range" id="source1" min="50" max="1000" value="500" class="input" step="50">
				<output for="source1" onforminput="value = source1.valueAsNumber;"></output>
			</li>
			<li>
				<label for="source2">E<sub>2</sub></label>
				<input type="range" id="source2" min="50" max="1000" value="500" class="input" step="50">
				<output for="source2" onforminput="value = source2.valueAsNumber;"></output>
			</li>
		</ul>
	</fieldset>
	<div class="submit-container">
		<input type="submit" value="Submit" id="submit">
	</div>
</form>

	<script src="jquery.js"></script>
	<script type="text/javascript" charset="utf-8" src="simula.js"></script>
	<script type="text/javascript" charset="utf-8" src="core.js"></script>
	<script type="text/javascript" charset="utf-8" src="engine.js"></script>
	<script type="text/javascript" charset="utf-8" src="form.js"></script>

</body>
</html>
